{% load i18n %}
{{ query.advanced.toggle }}
<div class="iommi_query_form_advanced" style="width: 100%; display: none">
    <label for="iommi_{{ query.iommi_dunder_path }}_query">{% blocktrans %}Search query{% endblocktrans %}:</label>
    <input id="iommi_{{ query.iommi_dunder_path }}_query" name="{{ query.get_advanced_query_param }}" type="text" style="width:70%" data-query="{{ query.query_advanced_value }}"/>

    <div class="iommi_query_toggle_help">
        <span>{% blocktrans %}Show help{% endblocktrans %}</span> <i class="fa fa-chevron-down"></i>
    </div>

    <div class="iommi_query_help" style="display: none">
        <div class="iommi_query_available_fields">
            <h3>{% blocktrans %}Available fields{% endblocktrans %}</h3>
            <ul>
                {% for name in query.filters %}
                    <li><code>{{ name }}</code></li>
                {% endfor %}
            </ul>
        </div>
        <div class="iommi_query_available_query_commands">
            <h3>{% blocktrans %}Queries{% endblocktrans %}</h3>
            <ul class="small">
                <li>{% blocktrans %}Search for an exact value: <code>field_name=value</code>{% endblocktrans %}</li>
                <li>{% blocktrans %}Search for an exact value containing space: <code>field_name="value with space"</code>{% endblocktrans %}</li>
                <li>{% blocktrans %}Containing a text: <code>field_name:val</code>{% endblocktrans %}</li>
                <li>{% blocktrans %}Exclude a value: <code>field_name!=value</code>{% endblocktrans %}</li>
                <li>{% blocktrans %}You can also use <code>&lt;</code>, <code>&gt;</code>, <code>&lt;=</code> and <code>&gt;=</code> to find ranges of values: <code>field_name&lt;10</code>{% endblocktrans %}</li>
                <li>{% blocktrans %}To search for dates, use ISO8601 format: <code>field_name>1969-07-20</code>{% endblocktrans %}</li>
                <li>{% blocktrans %}You can filter for relative dates: <code>field_name < "10 days ago"</code>. Supported fields are <code>days</code>, <code>months</code>, <code>years</code>, <code>quarters</code> and <code>weekdays</code>. They can be negative and abbreviated from <code>"10 days ago"</code> to <code>"-10d"</code>.{% endblocktrans %}</li>
            </ul>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        iommi_register_query_toggles('{{ query.iommi_dunder_path }}');
    });
</script>
